
<template>
  <view class="maintenance-page">
    <intake-nav-bar title="维保记录" dark :fixed="true" />
    <view class="content">
      <view class="info-card">
        <view class="card-title">设备信息</view>
        <view class="info-list">
          <view class="info-item">
            <text class="label">公司</text>
            <text class="value">国润甄泉</text>
          </view>
          <view class="info-item">
            <text class="label">地址</text>
            <text class="value">山东省济南市历城区</text>
          </view>
          <view class="info-item">
            <text class="label">小区</text>
            <text class="value">七里堡小区</text>
          </view>
          <view class="info-item">
            <text class="label">编号</text>
            <text class="value">GRZQ3701-01-001</text>
          </view>
          <view class="info-item">
            <text class="label">类型</text>
            <text class="value">售水机</text>
          </view>
          <view class="info-item">
            <text class="label">状态</text>
            <text class="value status-online">在线</text>
          </view>
        </view>
      </view>

      <view class="info-card">
        <view class="card-title">巡检信息</view>
        <view class="info-list info">
          <view class="info-item">
            <text class="label">巡检次数</text>
            <text class="rightIcon">18次</text>
          </view>
          <view class="info-item">
            <text class="label">巡检记录</text>
            <uni-icons class="rightIcon" type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { queryMaintenanceList } from "@/api/user/recharge";
export default {
    data() {
        return {
           
        };
    },
    onShow() {
      this.query()
    },
    methods: {
        query() {
          queryMaintenanceList({}).then(res => {
            console.log('========',res)
          })
        }
    }
};
</script>
<style lang="scss">
page {
  height: 100%;
  background-color: #F5F7FA;
}

.maintenance-page {
  min-height: 100%;
}

.nav-bar {
  display: flex;
  align-items: center;
  height: 88rpx;
  padding: 0 32rpx;
  background-color: #FFFFFF;
}

.nav-left {
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #333333;
  font-weight: 500;
  margin-right: 44rpx;
}

.content {
  padding: 24rpx;
}

.info-card {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
  overflow: hidden;
}

.card-title {
  height: 88rpx;
  line-height: 88rpx;
  padding: 0 32rpx;
  font-size: 32rpx;
  color: #FFFFFF;
  background-color: #034FFD;
  font-weight: 500;
  text-align: center;
}

.info-list {
  margin: 40rpx 21rpx;
  border: solid 1px #CFCFCF;
}

.info-item {
  display: flex;
  align-items: center;
  /* min-height: 88rpx; */
  border-bottom: 1px solid #CFCFCF;
  .status-online{
    color: #00C913;
  }
}
.info{
  .info-item{
    justify-content: space-between;
  }
  .rightIcon{
    margin-right: 20rpx;
  }
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  width: 140rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 24rpx;
  color: #666666;
  text-align: center;
  border-right: 1px solid #CFCFCF;
}

.value {
  flex: 1;
  font-size: 14px;
  color: #333333;
  padding-left: 21rpx;
}
</style>

